<template>
  <div class="home">
    <div class="search_box">
      <input type="text" v-model="searchVal" class="search_ipt" />
      <button @click="btn">搜索</button>
    </div>
    <table class="tab">
      <tr>
        <th>商品名</th>
        <th>
          单价<span @click="rank('price', false)">↑</span
          ><span @click="rank('price', true)">↓</span>
        </th>
        <th>
          销量<span @click="rank('sales', false)">↑</span
          ><span @click="rank('sales', true)">↓</span>
        </th>
      </tr>
      <tr v-for="(item, index) in seek" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.sales }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      searchVal: "",
      goodsList: [
        { name: "三星Galaxy Note8", price: 5200, sales: 2.6 },
        { name: "iphone5s", price: 2500, sales: 2.2 },
        { name: "iphone6", price: 2800, sales: 1.6 },
        { name: "iphone6s", price: 3200, sales: 2.9 },
        { name: "iphone7", price: 3800, sales: 12.6 },
        { name: "iphone7plus", price: 4200, sales: 2.1 },
        { name: "iphone8", price: 5500, sales: 10.6 },
        { name: "华为", price: 4600, sales: 7.6 },
        { name: "小米", price: 1200, sales: 32.6 },
        { name: "OPPOR11", price: 2500, sales: 1.2 },
        { name: "vivoX20", price: 3250, sales: 2.9 },
        { name: "OPPOR11s", price: 3000, sales: 2.1 },
      ],

      flag: false,
      letter: "",
    };
  },
  computed: {
    seek() {
      const { goodsList, search } = this;

      let newList = goodsList.filter((item) =>
        item.name.includes(this.searchVal)
      );

      if (this.letter != "") {
        console.log(this.letter);
      }

      return newList;
    },
  },
  methods: {
    btn() {},
    rank(letter) {
      this.letter = letter;
      if (this.letter != "") {
        this.goodsList.sort((a, b) => {
          return b.price - a.price;
        });
      } else {
        this.goodsList.sort((a, b) => {
          return a.price - b.price;
        });
      }
    },
  },
  mounted() {},
  created() {},
};
</script>
<style scoped lang="scss">
.home {
  width: 650px;
  height: 680px;
  border: 1px solid #ccc;
  margin: 20px auto;

  .search_box {
    .search_ipt {
      width: 400px;
      height: 50px;
    }
    button {
      width: 90px;
      height: 50px;
      margin-left: 20px;
    }
  }
  .tab {
    margin: 20px auto;
  }
  .tab tr th,
  .tab tr td {
    width: 33%;
    border: 1px solid #eee;
    padding: 5px 10px;
    text-align: left;
    span {
      background: #0c60a6;
      padding: 0 6px;
      color: #fff;
      cursor: pointer;
      margin: 0 5px;
    }
  }
}
</style>
